<template>
  <div class="app-container">
    <el-row>
      <el-button type="success" round @click="getList(1)">按天统计</el-button>
      <el-button type="primary" round @click="getList(2)">按周统计</el-button>
      <el-button type="danger" round @click="getList(3)">按月统计</el-button>
      <el-button type="info" round @click="exportExcel">导出Excel</el-button>
      <el-form
        :inline="true"
        :model="listQuery"
        ref="listQuery"
        class="demo-form-inline"
      >
        <el-form-item label="">
          <el-date-picker
            v-model="listQuery.date_start"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="创建开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="listQuery.date_end"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="创建结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSubmit">查询</el-button>
          <el-button type="primary" @click="resetSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      v-loading="listLoading"
      ref="dataList"
      :data="menuList"
      style="margin-bottom: 20px;"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @sort-change="handleSortChange"
    >
      <el-table-column prop="show_date" label="日期"></el-table-column>
      <el-table-column prop="user_code" label="房主编号"></el-table-column>
      <el-table-column prop="room_id" label="房间编号"></el-table-column>
      <el-table-column prop="room_name" label="房间名称"></el-table-column>
      <el-table-column prop="total" label="总流水" sortable="custom"></el-table-column>
      <el-table-column prop="backpackge_total" label="背包礼物流水" sortable="custom"></el-table-column>
      <el-table-column prop="room_total" label="房间礼物流水" sortable="custom"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="getDialogList(scope.row)" type="text" size="small">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.perPage"
      @pagination="getList(listQuery.type)"
    />
    <!-- 点击查看详情的弹出框 -->
    <el-dialog
      title="详细信息"
      :visible.sync="detailDialogVisible"
      @close="handleDialogClose(dataList2)"
    >
      <el-table
        v-loading="dialogLoading"
        ref="dataList2"
        :data="gridData"
        style="margin-bottom: 20px;"
        row-key="id"
        border
      >
        <el-table-column prop="date" label="时间"></el-table-column>
        <el-table-column prop="user_code" label="房主ID"></el-table-column>
        <el-table-column prop="room_id" label="房间ID"></el-table-column>
        <el-table-column prop="room_name" label="房间名称"></el-table-column>
        <el-table-column prop="total" label="总流水" sortable></el-table-column>
        <el-table-column prop="backpackge_total" label="背包礼物流水" sortable></el-table-column>
        <el-table-column prop="room_total" label="房间礼物流水" sortable></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  listData,
  listDataDetail,
  exportExcel
} from "@/api/allRoomWater/allRoomWater";

export default {
  data() {
    return {
      gridData: [],
      dialogLoading: false,
      detailDialogVisible: false,
      listLoading: false,
      menuList: [],
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        date_start: "",
        date_end: "",
        type: 1
      }
    };
  },
  created() {
    this.getList(1);
  },
  methods: {
    getList(type) {
      this.listLoading = true;
      if (type !== undefined) {
        this.listQuery.type = parseInt(type);
      }
      for (let key in this.listQuery) {
        this.listQuery[key] =
          this.listQuery[key] === "" ? undefined : this.listQuery[key];
      }

      listData(this.listQuery).then(response => {
        // response)
        this.menuList = response.data.list;
        this.total = response.data.meta.total;
        this.listLoading = false;
      });
    },
    // 点击查询
    searchSubmit() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 点击重置
    resetSubmit() {
      this.listQuery.page = 1;
      this.listQuery.perpage = 10;
      this.listQuery.date_start = undefined;
      this.listQuery.date_end = undefined;
      this.listQuery.type = 1;
    },
    // 点击查看详情
    getDialogList(row) {
      this.detailDialogVisible = true;
      this.dialogLoading = false;
      let urlData = `?id=${row.id}&date=${row.date}&type=${this.listQuery.type}`;
      listDataDetail(urlData).then(response => {
        this.gridData = response.data.list;
        this.dialogLoading = false;
      });
    },
    exportExcel() {
      let urlData = "?";
      if (this.listQuery.date_start) {
        urlData = urlData + `&date_start=${this.listQuery.date_start}`;
      }
      if (this.listQuery.date_end) {
        urlData = urlData + `&date_end=${this.listQuery.date_end}`;
      }
      if (this.listQuery.keyword) {
        urlData = urlData + `&keyword=${this.listQuery.keyword}`;
      }
      if (this.listQuery.type) {
        urlData = urlData + `&type=${this.listQuery.type}`;
      }
      exportExcel(urlData).then(response => {
        // response)
        location.href = response.data.download_url;
      });
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate(); // 清除整个表单的校验
      }
    },
    handleSortChange(column, prop, order) {
      console.log(column, prop, order)
      this.listQuery.page = 1;
      this.listQuery.perpage = 10;
      this.listQuery.order = column.prop
      this.listQuery.sort = ''
      if(column.order === "ascending") {
        this.listQuery.sort = 'asc'
      }
      if(column.order === "descending") {
        this.listQuery.sort = 'desc'
      }
      this.getList()
    }
  }
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

.demo-row-inline {
  margin-top: 20px;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
